import React, { useEffect, useState } from "react";
import AMapLoader from "@amap/amap-jsapi-loader";

const MapApiDemo = () => {
  const [map, setMap] = useState({});
  console.log("🚀 ~ file: index.js ~ line 8 ~ MapApiDemo ~ map", map);
  useEffect(() => {
    AMapLoader.load({
      key: "9521b429a680bfd6d464cadf0265e35f", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ["AMap.Geocoder", "AMap.Geolocation", "AMap.CitySearch"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then((AMap) => {
        setMap(
          new AMap.Map("container", {
            zoom: 10,
          })
        );
        AMap.plugin("AMap.Geolocation", function () {
          var geolocation = new AMap.Geolocation({
            // 是否使用高精度定位，默认：true
            enableHighAccuracy: true,
            // 设置定位超时时间，默认：无穷大
            timeout: 10000,
            // 定位按钮的停靠位置的偏移量
            offset: [10, 20],
            //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            zoomToAccuracy: true,
            //  定位按钮的排放位置,  RB表示右下
            position: "RB",
          });

          geolocation.getCurrentPosition(function (status, result) {
            console.log("🚀 ~ file: index.js ~ line 54 ~ status", status);
            console.log(
              "🚀 ~ file: index.js ~ line 50 ~ geolocation.getCurrentPosition ~ result",
              result
            );
            if (status === "complete") {
              onComplete(result);
            } else {
              onError(result);
            }
          });

          function onComplete(data) {
            // data是具体的定位信息
          }

          function onError(data) {
            console.log("🚀 ~ file: index.js ~ line 67 ~ onError ~ data", data);
            // 定位出错
          }
        });
      })
      .catch((e) => {
        console.log(e);
      });
  }, []);

  return <div id="container" className="map" style={{ height: "800px" }}></div>;
};

export default MapApiDemo;
